<template>
  <div class="home">
    <div class="main">
      <a-card style="width: 20%; height: 450px">
        <div style="overflow: scroll;">
          <a-menu id="dddddd" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" style="width: 100%"
            mode="vertical" :items="items" @click="handleClick"></a-menu>
        </div>
      </a-card>
      <a-card id="cate" style="width: 80%; height: 450px; position: absolute; right: 0; z-index: 0; overflow: scroll;">
        <a-row :gutter="[16, 2]" v-for="item in state.subCategories">
          <a-col :span="4"><a @click="cateCost(item[0])">{{item[0]}}</a></a-col>
          <a-col :span="20">
            <a-row  :gutter="[16, 16]">
                <a-col :span="2" v-for="subItem in item[1].slice(0, 10)">
                  <a @click="subCateCost(subItem)">{{ subItem }}</a>
                </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
      <a-card style="width: 80%; height: 450px;">
        <div class="show">
          <a-card :style="{ 'width': '55%', 'background-color': '#F2F2F2', 'margin-right': '5px' }">
            <a-carousel arrows>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                  <left-circle-outlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <right-circle-outlined />
                </div>
              </template>
              <div v-for="url in state.imgsOfBrand">
                <img :src="url" style="width: 100%; height: 350px;">
              </div>
            </a-carousel>
          </a-card>
          <a-card :style="{ 'width': '45%', 'height': '400px', 'background-color': '#F2F2F2' }">
            <a-carousel arrows>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                  <left-circle-outlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <right-circle-outlined />
                </div>
              </template>
              <div v-for="url in state.imgsOfTrend">
                <img :src="url" style="width: 100%; height: 350px;">
              </div>
            </a-carousel>
          </a-card>
        </div>
      </a-card>
    </div>
  </div>
  <div class="sub1">
    <div class="sub1Line">
      <a-card title="行业报告" style="width: 40%; height: 200px;">
        <a-list size="small" bordered :data-source="state.classifiedArticles['行业报告']">
          <template #renderItem="{ item }">
            <a-list-item><a @click="open(item.attachment)">{{ item.title }}</a></a-list-item>
          </template>
        </a-list>
      </a-card>
      <a-card title="政策文件" style="width: 60%; height: 200px;">
  <!-- 给 a-list 添加一个包裹容器，并设置固定的高度和 overflow 属性 -->
  <div style="height: 180px; overflow-y: auto;">
    <a-list size="small" bordered :data-source="state.classifiedArticles['政策文件']">
      <template #renderItem="{ item }">
        <a-list-item><a @click="open(item.attachment)">{{ item.title }}</a></a-list-item>
      </template>
    </a-list>
  </div>
</a-card>

    </div>
    <div class="sub1Line">
      <a-card title="招标公告" style="width: 40%; height: 200px;">
        <a-list size="small" bordered :data-source="state.classifiedArticles['招标公告']">
          <template #renderItem="{ item }">
            <a-list-item><a @click="open(item.attachment)">{{ item.title }}</a></a-list-item>
          </template>
        </a-list>
      </a-card>
      <a-card title="热点研究" style="width: 60%; height: 200px;">
        <a-list size="small" bordered :data-source="state.classifiedArticles['热点研究']">
          <template #renderItem="{ item }">
            <a-list-item><a @click="open(item.attachment)">{{ item.title }}</a></a-list-item>
          </template>
        </a-list>
      </a-card>
    </div>
  </div>
  <div class="sub2">
    <a-card title="品牌推荐" style="width: 100%; overflow: auto;">
      <div class="brands" style="height: 100%; width: 100%; display: flex; flex-wrap: wrap;">
        <img v-for="i in state.brands" :src="i.img" :alt="i.brandName" class="pic" @click="picJump(i.link)">
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, watch, h } from 'vue'
const state = reactive({})

import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
const selectedKeys = ref(['1'])
const openKeys = ref([])
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = reactive([
  getItem('Navigation One', 'sub1', () => h(MailOutlined), [
    getItem('建筑工程', '1'),
    getItem('装饰工程', '2'),
    getItem('安装工程', '3'),
    getItem('市政工程', '4'),
    getItem('园林绿化', '5'),
    getItem('城市轨道', '6'),
    getItem('仿古建筑', '7')], 'group')
])
console.log(items)

const categories = {
  '1': '建筑工程',
  '2': '装饰工程',
  '3': '安装工程',
  '4': '市政工程',
  '5': '园林绿化',
  '6': '城市轨道',
  '7': '仿古建筑'
}

let cateMenu = null

const handleClick = cagtegory => {
  cateMenu.style.zIndex = 100
  const cate = categories[cagtegory.key]
  state.subCategories = []
  fetchCategories(cate).then((res) => {
    res.data.result.forEach((category) => {
      fetchSubCagegories(category).then((res) => {
        state.subCategories.push([category, res.data.result])
      })
    })
    console.log(state.subCategories)
  })

}
watch(openKeys, val => {
  console.log('openKeys', val);
})

import { useRouter } from 'vue-router'
const router = new useRouter()

const cateCost = (cate) => {
  router.push({
    path: '../marketprice',
    query: {
      firstName: cate
    }
  })
}

const subCateCost = (cate) => {
  router.push({
    path: '../marketprice',
    query: {
      secondName: cate
    }
  })
}

//文件
const open = (attachment) => {
  const href = 'http://119.96.146.137:8090/jeecg-boot/' + attachment
  window.open(href)
}

//品牌推荐
const picJump = (link) => {
  window.open(link)
}

import http from '@/utils/axios'

state.imgs = reactive([])
state.articles = []
state.classifiedArticles = {}

const fetchCategories = async(cate) => {
  const subCategories = await http.get('/cost/classification/getFirstCategory?professionalCategory=' + cate)
  return subCategories
}

const fetchSubCagegories = async (key) => {
    const subSubCategories = await http.get('/cost/classification/getSecond?firstName=' + key)
    return subSubCategories
}

const fetchBrands = async (pageSize=100) => {
  const brands = await http.get('/home/brandPromotion/list?pageSize=' + pageSize)
  return brands.data.result.records.map((item) => {
    return {
      brandName: item.brandName,
      img: 'http://119.96.146.137:8090/jeecg-boot/' + item.image,
      link: 'jeecg' + item.link
    }
  })
}

const fetchArticles = async () => {
  const response = await http.get('/home/article/list?pageSize=10000')
  // console.log(response)
  return response.data.result.records
}

const classifyArticles = () => {
  state.articles.forEach(article => {
    if (!state.classifiedArticles[article.type]) {
      state.classifiedArticles[article.type] = []
    }
    state.classifiedArticles[article.type].push(article)
  });
};

const articleClick = (article)=>{
  alert(article.attachment)
}

import { onMounted } from 'vue'
onMounted(async () => {
  cateMenu = document.getElementById('cate')
  fetchBrands().then((res) => {
    state.brands = res
    console.log('brands', state.brands)
  })
  fetchArticles().then((res) => {
    state.articles = res
    classifyArticles()
    console.log('articles', state.classifiedArticles)
  })
  state.imgsOfBrand = [
    '/imgs/homepage/1.png',
    '/imgs/homepage/2.jpg',
    '/imgs/homepage/3.jpg'
  ]
  state.imgsOfTrend = [
    '/imgs/homepage/4.png',
    '/imgs/homepage/5.png'
  ]
})
</script>

<style scoped>
.home {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.main {
  width: 80%;
  display: flex;
  flex-direction: row;
  position: relative;
}

.sub1 {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.sub1Line {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.sub2 {
  width: 80%;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.show {
  display: flex;
  flex-direction: row;
  align-items: center;
}

:deep(.slick-slide) {
  text-align: center;
  height: 350px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}

.pic{
  width: 130px;
  height: 130px;
  cursor: pointer;
  transition: 0.1s;
}

.pic:hover{
  border-style: inset;
}
</style>